<!--本案台账  -->
<template>
  <div class='fieldList'>
    <div class="fieldList_selects">
      <Button class="fieldList_buttonEdit" @click="editField" type="primary"
        v-if="unlocking('0102010301')">编辑本案台账</Button>
    </div>
    <div class="fieldList_titleList">
      <span v-for="(item,index) in titleList" @click="changeTable(item,index)" :key="item.name"
        :class="['fieldList_title',item.selected?'actived':'']">{{item.name}}</span>
    </div>
    <div class="fieldList_tableBox">
      <dt-grid ref="table" :onFetch='onFetch' :page='page' />
    </div>
    <field-select ref="select" @save='onSave' />
  </div>
</template>

<script>
  import buildingFieldMgr from '@/biz/buildingManagement/buildingField/buildingField.js'
  import columns from './opt/columns'
  import fieldSelect from './components/fieldSelect.vue'
  export default {
    components: {
      fieldSelect
    },
    data() {
      return {
        titleList: [
          { name: '全部', selected: true, value: '', key: 'all' },
          { name: '基本信息', selected: false, value: '1', key: 'baseInfoVos' },
          { name: '服务信息', selected: false, value: '2', key: 'serviceInfoVos', },
          { name: '置业需求', selected: false, value: '3', key: 'buyDemandVos' },
          { name: '客户画像', selected: false, value: '4', key: 'customerInfoVos', },
        ],
        page: { rows: 10, },
        infoType: '',
      }
    },
    methods: {
      onFetch(data) {
        let params = {
          infoType: this.infoType == 0 ? '' : this.infoType,
          buildingId: this.$dt.buildInfo().housesId,
          ...data
        }
        return buildingFieldMgr.getStandingBookGetAllBuildPages(params).then((res) => {
          if (res) {
            res.list = res.pageData
            return res
          }
        })
      },

      //获取台账列表
      getTableList() {
        this.$refs.table.fetch(true)
      },
      //切换表格table
      changeTable(item, index) {
        this.titleList.map((item) => (item.selected = false))
        this.titleList[index].selected = true
        this.infoType = item.value
        this.getTableList()
      },
      //编辑
      editField() {
        this.$refs.select.showSelect()
      },
      onSave() {
        this.getTableList()
      }
    },
    mounted() {
      this.$refs.table.init(this, new columns(this))
      this.$refs.table.fetch()
    },
  }
</script>
<style lang='scss' scoped>
  .fieldList {
    .fieldList_selects {
      overflow: hidden;
    }

    .fieldList_tableBox {
      min-height: 200px;
    }

    .fieldList_buildSelected {
      float: left;
      width: 200px;
      margin-bottom: 20px;
    }

    .fieldList_buttonEdit {
      float: right;
      margin-right: 20px;
    }

    .fieldList_title {
      font-size: 18px;
      margin-right: 24px;
      font-weight: 700;
      cursor: pointer;
    }

    .fieldList_title.actived {
      color: #2d8cf0;
    }

    .fieldList_titleList {
      margin-bottom: 20px;
    }

    .pagePublicStyle {
      text-align: right;
      padding: 14px 0;
      margin-right: 30px;
    }

    .totalCount {
      float: left;
      line-height: 34px;
      padding-left: 20px;
    }
  }

  ::v-deep .ivu-tooltip-rel {
    display: inline-block;
  }
</style>